
[license-img]: https://img.shields.io/github/license/HuolalaTech/page-spy-web?label=License
[license-url]: https://github.com/HuolalaTech/page-spy-web/blob/main/LICENSE
[release-img]: https://img.shields.io/github/package-json/v/HuolalaTech/page-spy-web/release?label=Release
[release-url]: https://github.com/HuolalaTech/page-spy-web/blob/release/package.json
[browser-ver-img]: https://img.shields.io/npm/v/@huolala-tech/page-spy-browser?label=Browser&color=orange
[browser-ver-url]: https://npmjs.com/package/@huolala-tech/page-spy-browser
[uniapp-ver-img]: https://img.shields.io/npm/v/@huolala-tech/page-spy-uniapp?label=UniApp&color=green
[uniapp-ver-url]: https://npmjs.com/package/@huolala-tech/page-spy-uniapp
[wechat-ver-img]: https://img.shields.io/npm/v/@huolala-tech/page-spy-wechat?label=Wechat&color=green
[wechat-ver-url]: https://npmjs.com/package/@huolala-tech/page-spy-wechat
[alipay-ver-img]: https://img.shields.io/npm/v/@huolala-tech/page-spy-alipay?label=Alipay&color=blue
[alipay-ver-url]: https://npmjs.com/package/@huolala-tech/page-spy-alipay
[taro-ver-img]: https://img.shields.io/npm/v/@huolala-tech/page-spy-taro?label=Taro&color=blue
[taro-ver-url]: https://npmjs.com/package/@huolala-tech/page-spy-taro
[harmony-ver-img]: https://harmony.blucas.me/badge/version/@huolala/page-spy-harmony?label=Harmony&color=black
[harmony-ver-url]: https://ohpm.openharmony.cn/#/cn/detail/@huolala%2Fpage-spy-harmony
[api-ver-img]: https://img.shields.io/github/v/tag/HuolalaTech/page-spy-api?label=API
[api-ver-url]: https://github.com/HuolalaTech/page-spy-api/tags
[node-deploy]: https://img.shields.io/badge/Node_Deploy-Install-CB3937
[node-deploy-url]: https://pagespy.huolala.cn/#/docs/deploy-with-node
[docker-deploy]: https://img.shields.io/badge/Docker_Deploy-Install-1E63ED
[docker-deploy-url]: https://pagespy.huolala.cn/#/docs/deploy-with-docker
[bt-deploy]: https://img.shields.io/badge/BT_Deploy-Install-20a53a
[bt-deploy-url]: https://pagespy.huolala.cn/#/docs/deploy-with-baota
[web-repo]: https://github.com/HuolalaTech/page-spy-web
[sdk-repo]: https://github.com/HuolalaTech/page-spy
[server-repo]: https://github.com/HuolalaTech/page-spy-api


import React from 'react';
import { Flex } from 'antd';
import bannerImg from '@/assets/image/doc-banner.png';

import logo from '@/assets/image/logo.svg';
import consoleImg from '@/assets/image/screenshot/console-panel.png';
import networkImg from '@/assets/image/screenshot/network-panel.png';
import pageImg from '@/assets/image/screenshot/page-panel.png';
import storageImg from '@/assets/image/screenshot/storage-panel.png';
import systemImg from '@/assets/image/screenshot/system-panel.png';
import whyIsPageSpyImg from '@/assets/image/screenshot/why-is-pagespy-zh.png';
import offlineImg from '@/assets/image/screenshot/offline-panel.png';

export const githubUrl = import.meta.env.VITE_GITHUB_REPO;


<div align="center">
  <img src={logo} height="100" />
  <h1>Page Spy</h1>
  <h5>你肯定能用上的远程调试平台。</h5>
</div>

<div className='badges'>
  [![Release][release-img]][release-url]
  [![license][license-img]][license-url]
</div>

<div className="badges">
  [![Browser SDK version][browser-ver-img]][browser-ver-url]
  [![Wechat SDK version][wechat-ver-img]][wechat-ver-url]
  [![Alipay SDK version][alipay-ver-img]][alipay-ver-url]
  [![UniApp SDK version][uniapp-ver-img]][uniapp-ver-url]
  [![Taro SDK version][taro-ver-img]][taro-ver-url]
  [![Harmony SDK version][harmony-ver-img]][harmony-ver-url]
  [![API Version][api-ver-img]][api-ver-url] <br />
</div>

<div className="badges">
  [![Deploy with Node][node-deploy]][node-deploy-url]
  [![Deploy with Docker][docker-deploy]][docker-deploy-url]
  [![Deploy with Baota][bt-deploy]][bt-deploy-url]
</div>

## 什么是 PageSpy？#what-is-page-spy

**PageSpy** 是一款兼容 [Web](./browser) / [小程序](./miniprogram) / [React Native](./react-native) / [鸿蒙 App](./harmony) 等多平台的开源远程调试工具。

它基于对原生 API 的封装，将调用原生方法时的参数进行过滤、转化，整理成标准格式传输给调试端；调试端收到数据后，通过类似本地控制台的界面直观呈现出来。

## 为什么是 PageSpy?#why-is-page-spy

> 一图胜千言。

<a href={whyIsPageSpyImg} target="_blank">
  <img src={whyIsPageSpyImg} />
</a>

## 何时使用？#when-to-use

*任何无法在本地使用控制台调试的场景，都是 **PageSpy** 可以大显身手的时候！*
一起来看下面的几个场景案例：

- **本地调试 H5、Webview 应用**：移动端屏幕太小，传统调试面板操作不便、显示不友好，且容易出现信息截断；
- **远程办公、跨地区协同**：传统沟通方式（邮件、电话、视频会议）效率低，故障信息不完整，容易误解误判；
- **用户终端白屏问题排查**：数据监控、日志分析等传统方式依赖排障人员对业务和技术的深入理解，定位效率低；

PageSpy 的目标，就是为包括以上场景的人员提供帮助。

## 能力和场景概览#page-overview

PageSpy 在提供调试功能的基础上，扩展出 **在线实时调试** 和 **离线日志回放** 两种场景！

### 1. 在线实时调试#online-debugging

- Console 面板: 显示 `console.<log | info | warn | error | debug>` 输出的日志信息，可以发送代码到客户端执行；

<a href={consoleImg} target="_blank">
  <img src={consoleImg} />
</a>

- Network 面板: 显示客户端发出的网络请求信息；

<a href={networkImg} target="_blank">
  <img src={networkImg} />
</a>

- Element 面板: 显示客户端当前界面，查看 HTML 节点树；

<a href={pageImg} target="_blank">
  <img src={pageImg} />
</a>

- Storage 面板: 查看客户端本地的缓存数据；

<a href={storageImg} target="_blank">
  <img src={storageImg} />
</a>

- Systems 面板: 显示客户端的系统信息，查看兼容性。

<a href={systemImg} target="_blank">
  <img src={systemImg} />
</a>

除此之外，当有新数据产生或数据发生变化时，会实时地收到通知。

### 2. 离线日志回放#offline-debugging

<a href={offlineImg} target="_blank">
  <img src={offlineImg} />
</a>

灵活度高，回放进度由你把控，随着进度条的播放，可以查看到客户端的操作轨迹，以及对应的数据。